.header {
  width: 100%;
  height: 60px;
  background-color: #fff;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 10;
  box-shadow: 0 0 5px #ccc;
  .header-nav {
    // width: 100%;
    height: 60px;
    .header-nav-web {
      ul {
        li {
          float: left;
          list-style: none;
          a {
            position: relative;
            display: block;
            width: 58px;
            height: 100%;
            line-height: 60px;
            text-align: center;
            text-decoration: none;
            border-bottom: 2px solid transparent;
            color: #333;
            &:hover {
              &:after {
                content: '';
                display: block;
                width: 100%;
                height: 2px;
                background-color: #333;
                position: absolute;
                left: 0;
                bottom: 0;
                transition: 0.5s;
              }
            }
            
          }
          a:after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background-color: #333;
            position: absolute;
            left: 0;
            bottom: 0;
          }
          .active {
            &:after {
              content: '';
              display: block;
              width: 100%;
              height: 2px;
              background-color: #333;
              position: absolute;
              left: 0;
              bottom: 0;
              transition: 0.5s;
            }
          }
        }
      }
    }
  }
}